<template>
    <div class="cell" :class="showBottomLine && 'line'">
        <div class="label" :style="{width: labelWidth}">
            {{ label }}
        </div>
        <div class="right">
            <span v-if="value" class="value">
                {{ value }}
            </span>
            <div v-else class="placeholder">
                {{ placeholder }}
            </div>
            <img v-if="isShowArrow" class="arrow" src="@/assets/img/arrow.png" />
            <span v-if="rightExtraText" class="extra">{{ rightExtraText }}</span>
        </div>
    </div>
</template>

<script lang="ts" setup>
defineProps({
    label: {
        type: String,
        require: true,
        default: '',
    },
    labelWidth: {
        type: String,
        require: false,
        default: 'auto'
    },
    value: {
        type: String,
        require: true,
        default: '',
    },
    placeholder: {
        type: String,
        require: false,
        default: '',
    },
    isShowArrow: {
        type: Boolean,
        require: false,
        default: true
    },
    rightExtraText: {
        type: String,
        require: false,
        default: '',
    },
    // 是否展示底部分割线
    showBottomLine: {
        type: Boolean,
        require: false,
        default: true
    },
});
</script>

<style lang="scss" scoped>
.cell {
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .label {
        // font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #5b5b5b;
        // flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1;
        overflow: hidden;
        padding-left: 16px;

        span {
            display: inline-block;
            height: 20px;
            line-height: 20px;
        }

        .value {
            // font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            // max-width: calc(100% - 20px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .placeholder {
            font-weight: 400;
            font-size: 14px;
            color: #d2d2d2;
            text-align: right;
        }

        .arrow {
            width: 12px;
            height: 12px;
            margin-left: 8px;
        }

        .extra {
            font-weight: 400;
            font-size: 14px;
            color: #848484;
            text-align: right;
            margin-left: 8px;
        }
    }
}

.line::after {
    position: absolute;
    box-sizing: border-box;
    content: " ";
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #eeeeee;
    transform: scaleY(0.5);
    color: #333333;
}
</style>
